import ProDescriptions from '@ant-design/pro-descriptions';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import { Card, Modal } from 'antd';
import React from 'react';
import { Link, useHistory, useParams } from 'react-router-dom';

import { IMenu } from '@/models/user';
import { deleteMenu, getMenu } from '@/services/system/menu';

import { IParams } from './type';

export default () => {
  const history = useHistory();
  const params: IParams = useParams();

  const columns: ProColumns<IMenu>[] = [
    {
      title: '菜单',
      dataIndex: 'title',
    },
    {
      title: 'code',
      dataIndex: 'code',
    },
    {
      title: '路径',
      dataIndex: 'path',
    },
    {
      title: '重定向',
      dataIndex: 'redirect',
    },
    {
      title: '图标',
      dataIndex: 'icon',
    },
    {
      title: '是否展示',
      dataIndex: 'show',
      render: (v) => (v ? '是' : '否'),
    },
    {
      title: '排序',
      dataIndex: 'order',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
    },
    {
      title: '操作',
      valueType: 'option',
      render: () => [
        <Link key="update" to={`/system/menu/update/${params.id}`}>
          编辑
        </Link>,
        <a onClick={onDelete} key="delete">
          删除
        </a>,
      ],
    },
  ];

  async function onDelete() {
    Modal.confirm({
      title: '确认是否删除菜单？',
      async onOk() {
        await deleteMenu(+params.id);
        onBack();
      },
    });
  }

  async function onBack() {
    history.push('/system/menu');
  }

  return (
    <PageContainer onBack={onBack} title="菜单详情">
      <Card>
        <ProDescriptions
          title="详情"
          request={async () => {
            const { data } = await getMenu(+params.id);
            return {
              success: true,
              data,
            };
          }}
          columns={columns}
        />
      </Card>
    </PageContainer>
  );
};
